<template>
  <div class="wrapper">
    <el-upload
      ref="upt"
      class="upload-demo"
      :action="action"
      :data="state.params"
      :on-success="handleSuccess"
      :before-remove="beforeRemove"
      :on-preview="onPreview"
      :http-request="upLoad"
      :on-remove="onRemove"
      multiple
      list-type="text"
      :show-file-list="false"
    >
      <slot> <input type="file" /></slot>
    </el-upload>
    <el-dialog v-model="state.imgdialogVisible">
      <img width="100%" :src="state.dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { ElNotification } from "element-plus";
var COS = require("cos-js-sdk-v5");
import fileMd5Sum from "@/untils/md5.js";   //Md5加密
export default {
  props: {
    action: {
      type: String,
      default: "",
    },
    is_open:{
      type:Number,
      default:1
    }
  },
  setup(props, { emit }) {
    let upt = ref(null);
    const { ctx } = getCurrentInstance();
    const state = reactive({
      fileList: [],
      imgdialogVisible: false,
      dialogImageUrl: "",
    });
    // 获取签名
    function get_sign_fun(file_md5, e) {
      return new Promise((resolve, reject) => {
        ctx.$http
          .post("/base/file/user_file/get_upload_sign/", {
            file_hash_str: file_md5,
            file_size: e.file.size,
            is_open: props.is_open,   //1: 公开，0 私有 是否公开文件  根据业务设置 文件的 开放属性 默认公开
          })
          .then((res) => {
            if (res.errno == 0) {
              resolve(res);
            }
          })
          .catch((err) => {
            reject(err);
            ElNotification.error(err);
          });
      });
    }
    // 上传方法
    async function upLoad(e) {
      var file = e.file;
      let Md5_FILE = await fileMd5Sum.fileMd5Sum(file);
      console.log("Md5_FILE", Md5_FILE);
      var uploadFileName = e.file.name;
      // 获取后台相关秘钥
      get_sign_fun(Md5_FILE, e).then((response) => {
        if(response.data.file_info.e_tag){
          console.log("文件已存在，直接给后台发送");
          let { e_tag,name}=response.data.file_info;
          send_py_pc(e_tag,name);
          return
        }
        console.log("文件不存在，需要发给腾讯云");
        const data = response.data.sign_info;
        var cos = new COS({
          getAuthorization: function (options, callback) {
            callback({
              TmpSecretId: data.tmpSecretId, //获取回来的临时密钥的 tmpSecretId
              TmpSecretKey: data.tmpSecretKey, //获取回来的临时密钥的 tmpSecretKey
              XCosSecurityToken: data.token, //获取回来的临时密钥的 sessionToken，对应 header 的 x-cos-security-token 字段
              StartTime: "", //密钥获取的开始时间，即获取时刻的时间戳，单位秒，startTime，如：1580000000，用于签名开始时间，传入该参数可避免前端时间偏差签名过期问题
              ExpiredTime: data.ex_time, //获取回来的临时密钥的 expiredTime，超时时刻的时间戳，单位秒，如：1580000900
              expiration: "",
              requestId: "",
            });
          },
        });
        cos.putObject(
          {
            Bucket: data.Bucket, // 存储桶名称
            Region: data.Region, // 地区
            Key: "/" + Md5_FILE + "." + uploadFileName.split(".")[1], // 图片名称
            StorageClass: "STANDARD",
            Body: file, // 上传文件对象
            onHashProgress: function (progressData) {
              // console.log("校验中", JSON.stringify(progressData));
            },
            onProgress: function (progressData) {
              // console.log("上传中", JSON.stringify(progressData));
            },
          },
          function (err, data) {
            console.log("腾讯云的回调", err, data);
            if (err) {
              ElNotification.error({
                message: "文件上传失败,请重新上传",
                type: "error",
              });
            } else {
              // let fileUrl = "http://" + data.Location;
              let ETag = data.ETag;
              send_py_pc(ETag, file.name);
            }
          }
        );
      });
    }
    //腾讯云的回调之后，发给后台
    function send_py_pc(e_tag, file_name) {
      ctx.$http
        .post("/base/file/user_file/file_upload/", {
          e_tag: e_tag,
          file_name: file_name,
          is_open:props.is_open  //1: 公开，0 私有 是否公开文件  根据业务设置 文件的 开放属性 默认公开
        })
        .then((res) => {
          if (res.errno == 0) {
            ElNotification.success(res.errmsg);
            emit("onSuccess", res.data);
            upt.value.clearFiles();
          } else {
            ElNotification.error(res.errmsg);
          }
        })
        .catch((err) => {
          ElNotification.error(err);
        });
    }

    function onPreview(file) {
      console.log(file);
      state.imgdialogVisible = true;
      state.dialogImageUrl = ctx.$http.IMG_HOST + file.response.data.url;
    }

    // 上传成功
    function handleSuccess(res, file) {
      // console.log("上传完成..........", res);
      //图片路径返回给父组件
      // emit("onSuccess", res.data);
      // upt.value.clearFiles();
    }
    // 移除之前
    function beforeRemove(file, fileList) {
      emit("beforeRemove", file);
    }
    function onRemove(file, fileList) {
      console.log("移出", file);
    }
    return {
      upt,
      state,
      handleSuccess,
      beforeRemove,
      onRemove,
      onPreview,
      upLoad,
    };
  },
};
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  align-items: center;
  img {
    width: 100%;
  }
}
</style>